<template>
    <div class="jc-component__range">
        <div class="jc-range" :class="rangeStatus?'success':''" >
            <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>
            {{ rangeStatus ? successText : startText}}
        </div>
    </div>
</template>

<script>
export default {
    props: {
        successFun: {
            type: Function
        },
        successIcon: {
            type: String,
            default: 'el-icon-success'
        },
        successText: {
            type: String,
            default: '验证成功'
        },
        startIcon: {
            type: String,
            default: 'el-icon-d-arrow-right'
        },
        startText: {
            type: String,
            default: '请拖住滑块，拖动到最右边'
        },
        errorFun: {
            type: Function
        },
        status: {
            type: String
        }
    },
    data () {
        return {
            disX : 0,
            rangeStatus: false
        }
    },
    methods: {
        rangeMove(e){
            let ele = e.target;
            let startX = e.clientX;
            let eleWidth = ele.offsetWidth;
            let parentWidth =  ele.parentElement.offsetWidth;
            let MaxX = parentWidth - eleWidth;
            if(this.rangeStatus){//不运行
                return false;
            }
            document.onmousemove = (e) => {
                let endX = e.clientX;
                this.disX = endX - startX;
                if(this.disX<=0){
                    this.disX = 0;
                }
                if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
                    this.disX = MaxX;
                }
                ele.style.transition = '.1s all';
                ele.style.transform = 'translateX('+this.disX+'px)';
                e.preventDefault();
            }
            document.onmouseup = () => {
                if(this.disX !== MaxX){
                    ele.style.transition = '.5s all';
                    ele.style.transform = 'translateX(0)';
                    //执行成功的函数
                    this.errorFun && this.errorFun();
                }else{
                    this.rangeStatus = true;
                    if(this.status){
                        this.$parent[this.status] = true;
                    }
                    //执行成功的函数
                    this.successFun && this.successFun();
                }
                document.onmousemove = null;
                document.onmouseup = null;
            }
        },
    },
}
</script>

<style lang="less" scoped>
.jc-component__range{
    .jc-range{
        height: 40px;
        background-color: transparent;
        transition: 1s all;
        user-select: none;
        color: #9B9EA8;
        background-color: #EAEFFE;
        // border: 1px solid #BBEBE3;
        border: none;
        border-radius: 8px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &.success{
            background-color: #3FAEFF;
            color: #FFFFFF;
            i{
                color: #3FAEFF;
                background-color: #EAEFFE;
            }
        }
        i{
            width: 47px;
            height: 100%;
            color: #3FAEFF;
            background-color: transparent;
            border: 1px solid #3FAEFF;
            border-radius: 8px;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 0;
        }
    }
}
</style>
